/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import _ from 'lodash';
import Taro, { Component } from '@tarojs/taro'

// project
import S from '../../style/style';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class LayoutBase extends Component {
    
    /**
     * 初始化
     */
    constructor(props) {
        super(props);
        
        // 取回styles（已组合自定义和原生styles
        this.styles = Object.assign(
            this.getFixedStyles(), 
            this.getGroupStyles(), 
            // this.getAttributeStyles(), 
            this.getOriginStyles()
        );
        // Object.assign(this.styles, this.getAlignStyles());

        // 并取回sysProps
        // let deleteProps = [];
        // if (_.isFunction(this.getDeleteProps)) {
        //     deleteProps = this.getDeleteProps();
        // }
		// this.sysProps = _.omit(
        //     this.props, 
        //     deleteProps,
		// 	[
        //         // position
        //         'abs', 'rel',
                
        //         // absolute
        //         'top', 'bottom', 'left', 'right',
                
        //         // base
        //         'f', 'x', 'y', 'w', 'h', 'lh', 'bg', 'opacity',

        //         // margin
        //         'ma', 'mt', 'mb', 'ml', 'mr', 'mx', 'my',

        //         // padding
        //         'pa', 'pt', 'pb', 'pl', 'pr', 'px', 'py',

        //         // border
        //         'ba', 'bt', 'bb', 'bl', 'br', 'bx', 'by',
                
        //         // radius
        //         'ra', 'rt', 'rb', 'rl', 'rr',

        //         // font
        //         'color', 'size', 'bold', 'align',

        //         // display
        //         'df', 'dn', 'db', 'di',

        //         // overflow
        //         'oh', 'oa', 'os',

        //         // 去除原生的style和children
        //         'style', 'children'
        //     ]
        // );
    }
    
    /**
     * 获取对齐styles
     */
    // getAlignStyles() {
    //     if (_.isUndefined(this.styles.flexDirection)) {
    //         return {};
    //     }
    //     if (this.styles.flexDirection == 'row') {
    //         return Object.assign({},
    //             this.props.x && S.jf(this.props.x), 
    //             this.props.y && S.ai(this.props.y)
    //         );
    //     } 
    //     else if (this.styles.flexDirection == 'column') {
    //         return Object.assign({},
    //             this.props.x && S.ai(this.props.x), 
    //             this.props.y && S.jf(this.props.y)
    //         );
    //     }
    // }

    /**
     * 获取属性级自定义styles
     */
    // getAttributeStyles() {

    //     // 取this.props的简称
    //     const p = this.props;

    //     // 计算styles，自带display:flex属性
    //     let styles = Object.assign(

    //         // display: flex
    //         S.df(),

    //         // position
    //         p.abs && S.abs(),
    //         p.rel && S.rel(),

    //         // absolute
    //         p.top && S.top(p.top),
    //         p.bottom && S.bottom(p.bottom),
    //         p.left && S.left(p.left),
    //         p.right && S.right(p.right),

    //         // base
    //         p.f && S.f(p.f),
    //         p.w && S.w(p.w),
    //         p.h && S.h(p.h),
    //         p.lh && S.lh(p.lh),
    //         p.bg && S.bg(p.bg),
    //         p.opacity && S.opacity(p.opacity),
        
    //         // margin
    //         p.ma && S.ma(p.ma),
    //         p.mt && S.mt(p.mt),
    //         p.mb && S.mb(p.mb),
    //         p.ml && S.ml(p.ml),
    //         p.mr && S.mr(p.mr),
    //         p.mx && S.mx(p.mx),
    //         p.my && S.my(p.my),

    //         // padding
    //         p.pa && S.pa(p.pa),
    //         p.pt && S.pt(p.pt),
    //         p.pb && S.pb(p.pb),
    //         p.pl && S.pl(p.pl),
    //         p.pr && S.pr(p.pr),
    //         p.px && S.px(p.px),
    //         p.py && S.py(p.py),

    //         // border
    //         p.ba && S.ba(p.ba),
    //         p.bt && S.bt(p.bt),
    //         p.bb && S.bb(p.bb),
    //         p.bl && S.bl(p.bl),
    //         p.br && S.br(p.br),
    //         p.bx && S.bx(p.bx),
    //         p.by && S.by(p.by),

    //         // radius
    //         p.ra && S.ra(p.ra),
    //         p.rt && S.rt(p.rt),
    //         p.rb && S.rb(p.rb),
    //         p.rl && S.rl(p.rl),
    //         p.rr && S.rr(p.rr),

    //         // font
    //         p.color && S.color(p.color),
    //         p.size && S.size(p.size),
    //         p.bold && S.bold(),
    //         p.align && S.bold(p.align),

    //         // display
    //         p.df && S.df(p.df),
    //         p.dn && S.dn(p.dn),
    //         p.db && S.db(p.db),
    //         p.di && S.di(p.di),

    //         // overflow
    //         p.oh && S.oh(p.oh),
    //         p.oa && S.oa(p.oa),
    //         p.os && S.os(p.os),
    //     );

    //     // 返回
    //     return styles;
    // }

    /**
     * 获取Group自定义styles
     */
    getGroupStyles() {
		if (!_.isUndefined(this.props.group)) {
            return this.props.group;
        }
		return {};
    }

    /**
     * 获取原生级自定义styles
     */
    getOriginStyles() {
		if (!_.isUndefined(this.props.style)) {
            return this.props.style;
        }
		return {};
    }
}
